آموزش AJAX Next Level (احراز هویت، سرورها، ماژول‌ها، پروژه‌ها و موارد دیگر) [ویدئو]

سرفصل ها و درس ها

مقدمه ای بر AJAX و Recap Introduction to the AJAX and Recap

• معرفی Introduction

• نمای کلی AJAX Overview of AJAX

• AJAX چیست و از کجا آمده است؟ What Is AJAX and Where Did It Come From?

• درخواست سنتی در مقابل درخواست AJAX Traditional Request Versus AJAX Request

• چگونه درخواست AJAX را بنویسید؟ How Do You Write an AJAX Request?

خلاصه پروژه کوچک Mini-Project Recap

• مقدمه - چه چیزی را قرار است بسازیم Introduction – What Are We Going to Build

• مقدمه - چه چیزی را قرار است بسازیم Introduction – What Are We Going to Build

• راه اندازی HTML Setting Up the HTML

• راه اندازی HTML Setting Up the HTML

• نوشتن CSS Writing the CSS

• نوشتن CSS Writing the CSS

• XHR AJAX - واکشی متن از سرور ما XHR AJAX - Fetching Text from Our Server

• XHR AJAX - واکشی متن از سرور ما XHR AJAX - Fetching Text from Our Server

• XHR AJAX - Refactoring کد و افزودن HTML به DOM XHR AJAX - Refactoring Code and Adding HTML to the DOM

• XHR AJAX - Refactoring کد و افزودن HTML به DOM XHR AJAX - Refactoring Code and Adding HTML to the DOM

• XHR AJAX - واکشی JSON از سرور ما XHR AJAX - Fetching JSON from Our Server

• XHR AJAX - واکشی JSON از سرور ما XHR AJAX - Fetching JSON from Our Server

• ویژگی answerType The responseType Property

• ویژگی answerType The responseType Property

• API شخص ثالث Third-Party API

• API شخص ثالث Third-Party API

• XHR AJAX - واکشی JSON از یک API شخص ثالث XHR AJAX - Fetching JSON from a Third-Party API

• XHR AJAX - واکشی JSON از یک API شخص ثالث XHR AJAX - Fetching JSON from a Third-Party API

• واکشی AJAX - بازیابی متن از سرور خودمان Fetch AJAX - Retrieving Text from Our Own Server

• واکشی AJAX - بازیابی متن از سرور خودمان Fetch AJAX - Retrieving Text from Our Own Server

• واکشی AJAX - بازیابی JSON از سرور ما و API شخص ثالث Fetch AJAX - Retrieving JSON from Our Server and Third-Party API

• واکشی AJAX - بازیابی JSON از سرور ما و API شخص ثالث Fetch AJAX - Retrieving JSON from Our Server and Third-Party API

Recap پیشرفته Mini-Project (PHP و Node.js) Advanced Mini-Project Recap (PHP and Node.js)

• معرفی بخش Introduction to the Section

• معرفی بخش Introduction to the Section

• قرار است چه چیزی بسازیم What Are We Going to Build

• قرار است چه چیزی بسازیم What Are We Going to Build

• HTML ما را بنویسید Write Our HTML

• HTML ما را بنویسید Write Our HTML

• تنظیم درخواست AJAX ما Setting Up Our AJAX Request

• تنظیم درخواست AJAX ما Setting Up Our AJAX Request

• URL و پارامترهای پرس و جو URL and Query Parameters

• URL و پارامترهای پرس و جو URL and Query Parameters

• نوشتن کد سمت سرور پی اچ پی ما Writing Our PHP Server-Side Code

• نوشتن کد سمت سرور پی اچ پی ما Writing Our PHP Server-Side Code

• نحوه دسترسی به داده های XML بازگردانده شده توسط سرور How to Access XML Data Returned by the Server

• نحوه دسترسی به داده های XML بازگردانده شده توسط سرور How to Access XML Data Returned by the Server

• بازیابی داده ها از سرور PHP و درج آن در DOM Retrieving Data from the PHP Server, and Inserting It into the DOM

• بازیابی داده ها از سرور PHP و درج آن در DOM Retrieving Data from the PHP Server, and Inserting It into the DOM

• به پایان رساندن نمونه سرور PHP ما Finishing Off Our PHP Server Example

• به پایان رساندن نمونه سرور PHP ما Finishing Off Our PHP Server Example

• راه اندازی Node و ارسال پاسخ Setting Up Node and Sending a Response

• راه اندازی Node و ارسال پاسخ Setting Up Node and Sending a Response

• خواندن پاسخ متن گره Reading a Node Text Response

• خواندن پاسخ متن گره Reading a Node Text Response

• تکمیل مثال گره ما Completing Our Node Example

• تکمیل مثال گره ما Completing Our Node Example

Recap پیشرفته Mini-Project (PHP و Node.js) Advanced Mini-Project Recap (PHP and Node.js)

احراز هویت پایه HTTP با استفاده از AJAX HTTP Basic Authentication Using AJAX

• مقدمه ای بر احراز هویت Introduction to Authentication

• مقدمه ای بر احراز هویت Introduction to Authentication

• HTTP Auth اولیه در عمل Basic HTTP Auth in Action

• HTTP Auth اولیه در عمل Basic HTTP Auth in Action

• احراز هویت اولیه چگونه کار می کند و چرا در این دوره در مورد آن بحث می کنیم How Basic Authentication Works and Why Are We Discussing it in this Course

• احراز هویت اولیه چگونه کار می کند و چرا در این دوره در مورد آن بحث می کنیم How Basic Authentication Works and Why Are We Discussing it in this Course

• Base64 Encoding در مقابل رمزگذاری Base64 Encoding Versus Encryption

• Base64 Encoding در مقابل رمزگذاری Base64 Encoding Versus Encryption

• احراز هویت اولیه در مقایسه با درخواست های HTTP سنتی Basic Authentication Compared to Traditional HTTP Requests

• احراز هویت اولیه در مقایسه با درخواست های HTTP سنتی Basic Authentication Compared to Traditional HTTP Requests

• آپاچی چیست؟ What Is Apache?

• آپاچی چیست؟ What Is Apache?

• تعادل درست را ایجاد کنید Strike the Right Balance

• تعادل درست را ایجاد کنید Strike the Right Balance

• نحوه راه اندازی سرور آپاچی How to Start an Apache Server

• نحوه راه اندازی سرور آپاچی How to Start an Apache Server

• راه اندازی سرور آپاچی و فایل htaccess Setting Up Our Apache Server and .htaccess File

• راه اندازی سرور آپاچی و فایل htaccess Setting Up Our Apache Server and .htaccess File

• افزودن احراز هویت اولیه در آپاچی Adding Basic Authentication in Apache

• افزودن احراز هویت اولیه در آپاچی Adding Basic Authentication in Apache

• قرار است چه چیزی بسازیم What Are We Going to Build

• قرار است چه چیزی بسازیم What Are We Going to Build

• ساخت HTML Building the HTML

• ساخت HTML Building the HTML

• روش preventDefault The preventDefault Method

• روش preventDefault The preventDefault Method

• ارسال اعتبار کاربر با AJAX، با کدگذاری سفارشی base64 Sending User Credentials with AJAX, with Custom base64 Encoding

• ارسال اعتبار کاربر با AJAX، با کدگذاری سفارشی base64 Sending User Credentials with AJAX, with Custom base64 Encoding

• استفاده از XHR برای احراز هویت اولیه Using XHR for Basic Authentication

• استفاده از XHR برای احراز هویت اولیه Using XHR for Basic Authentication

• ایجاد یک پیغام خطای سفارشی در آپاچی Creating a Custom Error Message in Apache

• ایجاد یک پیغام خطای سفارشی در آپاچی Creating a Custom Error Message in Apache

• به روز رسانی کد ما به API مدرن Fetch Updating Our Code to the Modern Fetch API

• به روز رسانی کد ما به API مدرن Fetch Updating Our Code to the Modern Fetch API

• مثال گره - قرار است چه چیزی بسازیم؟ Node Example - What Are We Going to Build?

• مثال گره - قرار است چه چیزی بسازیم؟ Node Example - What Are We Going to Build?

• Node Server چیست؟ What is a Node Server?

• Node Server چیست؟ What is a Node Server?

• راه اندازی Node Server ما Setting Up Our Node Server

• راه اندازی Node Server ما Setting Up Our Node Server

• بررسی اینکه آیا عنوان مجوز وجود دارد یا خیر Checking Whether the Authorization Header Exists

• بررسی اینکه آیا عنوان مجوز وجود دارد یا خیر Checking Whether the Authorization Header Exists

• استخراج اعتبار کاربر با استفاده از بافر Extract User Credentials Using Buffer

• استخراج اعتبار کاربر با استفاده از بافر Extract User Credentials Using Buffer

• هیچ زبان سمت سرور عالی نیست No Server-Side Language is Perfect

• هیچ زبان سمت سرور عالی نیست No Server-Side Language is Perfect

• اتمام مثال گره ما Finishing Off Our Node Example

• اتمام مثال گره ما Finishing Off Our Node Example

• تابع () بعدی میان افزار را متوقف می کند The next() Function Stops Middleware

• تابع () بعدی میان افزار را متوقف می کند The next() Function Stops Middleware

• اطلاعات بیشتر در مورد تابع () next More about the next() Function

• اطلاعات بیشتر در مورد تابع () next More about the next() Function

• خطا مشاهده شد Spotted an Error

• خطا مشاهده شد Spotted an Error

• احراز هویت پایه - خلاصه بخش Basic Authentication - Section Summary

• احراز هویت پایه - خلاصه بخش Basic Authentication - Section Summary

• بخش Outro Section Outro

• بخش Outro Section Outro

احراز هویت پایه HTTP با استفاده از AJAX HTTP Basic Authentication Using AJAX

اشتراک منبع متقابل (CORS) و سیاست منشاء واحد (SOP) Cross-Origin-Resource-Sharing (CORS) and Single-Origin-Policy (SOP)

• مقدمه ای بر CORS Introduction to CORS

• مقدمه ای بر CORS Introduction to CORS

• مقدمه ای بر سیاست همان مبدأ (SOP) Introduction to Same-Origin-Policy (SOP)

• مقدمه ای بر سیاست همان مبدأ (SOP) Introduction to Same-Origin-Policy (SOP)

• دو نوع درخواست CORS - ساده + قبل از پرواز Two Types of CORS Requests - Simple + Preflight

• دو نوع درخواست CORS - ساده + قبل از پرواز Two Types of CORS Requests - Simple + Preflight

• روش HEAD چیست؟ What is the HEAD Method

• روش HEAD چیست؟ What is the HEAD Method

• درخواست CORS ساده Simple CORS Request

• درخواست CORS ساده Simple CORS Request

• پیشگفتار در مورد هدف درخواست قبل از پرواز Foreword on the Purpose of a Preflight Request

• پیشگفتار در مورد هدف درخواست قبل از پرواز Foreword on the Purpose of a Preflight Request

• درخواست پیش از پرواز CORS CORS Preflight Request

• درخواست پیش از پرواز CORS CORS Preflight Request

• CORS در عمل CORS in Action

• CORS در عمل CORS in Action

• تنظیم صحنه برای مثال CORS Setting the Scene for a CORS Example

• تنظیم صحنه برای مثال CORS Setting the Scene for a CORS Example

• راه اندازی HTML ما Setting Up Our HTML

• راه اندازی HTML ما Setting Up Our HTML

• انجام یک درخواست CORS ساده Performing a SIMPLE CORS Request

• انجام یک درخواست CORS ساده Performing a SIMPLE CORS Request

• سربرگ Access-Control-Allow-Origin وجود ندارد Missing the Access-Control-Allow-Origin Header

• سربرگ Access-Control-Allow-Origin وجود ندارد Missing the Access-Control-Allow-Origin Header

• حملات CSRF CSRF Attacks

• حملات CSRF CSRF Attacks

• نحوه فعال کردن CORS در یک درخواست ساده How to Enable CORS on a SIMPLE Request

• نحوه فعال کردن CORS در یک درخواست ساده How to Enable CORS on a SIMPLE Request

• افزودن Access-Control-Allow-Origin در سرور ما Adding the Access-Control-Allow-Origin on Our Server

• افزودن Access-Control-Allow-Origin در سرور ما Adding the Access-Control-Allow-Origin on Our Server

• چگونه یک درخواست CORS قبل از پرواز را شروع کنیم How to Initiate a PREFLIGHT CORS Request

• چگونه یک درخواست CORS قبل از پرواز را شروع کنیم How to Initiate a PREFLIGHT CORS Request

• ارسال یک درخواست CORS قبل از پرواز با تنظیم سربرگ نوع محتوای سفارشی Sending a PREFLIGHT CORS Request by Setting Custom Content-Type Header

• ارسال یک درخواست CORS قبل از پرواز با تنظیم سربرگ نوع محتوای سفارشی Sending a PREFLIGHT CORS Request by Setting Custom Content-Type Header

• تنظیم Access-Control-Allow-Headers روی سرور Setting the Access-Control-Allow-Headers on the Server

• تنظیم Access-Control-Allow-Headers روی سرور Setting the Access-Control-Allow-Headers on the Server

• افزودن احراز هویت اولیه Adding Basic Authentication

• افزودن احراز هویت اولیه Adding Basic Authentication

• خلاصه CORS CORS Summary

• خلاصه CORS CORS Summary

• Outro Outro

• Outro Outro

اشتراک منبع متقابل (CORS) و سیاست منشاء واحد (SOP) Cross-Origin-Resource-Sharing (CORS) and Single-Origin-Policy (SOP)

پروژه نهایی دوره - وظیفه 1 - سرور و مسیرها Course Final Project – Task 1 – Server and Routes

• معرفی بخش Introduction to Section

• معرفی بخش Introduction to Section

• تعریف RESTful API Endpoints Defining RESTful API Endpoints

• تعریف RESTful API Endpoints Defining RESTful API Endpoints

• ابتدا کد سمت سرور و سپس فقط AJAX خواهیم ساخت First, We Will Build Server-Side Code and Then Only AJAX

• ابتدا کد سمت سرور و سپس فقط AJAX خواهیم ساخت First, We Will Build Server-Side Code and Then Only AJAX

• نگاه یواشکی Sneak Peek

• نگاه یواشکی Sneak Peek

• استفاده از NPM برای نصب چارچوب Express Using NPM to Install the Express Framework

• استفاده از NPM برای نصب چارچوب Express Using NPM to Install the Express Framework

• NPM و Node Modules چیست؟ What is NPM and Node Modules

• NPM و Node Modules چیست؟ What is NPM and Node Modules

• مشاهده کد منبع Express در داخل پوشه node_modules Viewing the Express Source Code Inside the node_modules Folder

• مشاهده کد منبع Express در داخل پوشه node_modules Viewing the Express Source Code Inside the node_modules Folder

• راه اندازی Node Server ما Setting Up Our Node Server

• راه اندازی Node Server ما Setting Up Our Node Server

• تفاوت بین res.send() در مقابل res.end() Difference Between res.send() Versus res.end()

• تفاوت بین res.send() در مقابل res.end() Difference Between res.send() Versus res.end()

• تعریف مسیرها در سرور ما Defining Routes on Our Server

• تعریف مسیرها در سرور ما Defining Routes on Our Server

• تعریف مسیرهای ما در یک فایل جداگانه Defining Our Routes in a Separate File

• تعریف مسیرهای ما در یک فایل جداگانه Defining Our Routes in a Separate File

• صادرات مسیرهای ما از طریق فرمان module.exports Exporting Our Routes Through the module.exports Command

• صادرات مسیرهای ما از طریق فرمان module.exports Exporting Our Routes Through the module.exports Command

• ماژول های جاوا اسکریپت (ماژول های ES) در مقابل ماژول های گره (CommonJS) JavaScript Modules (ES Modules) Versus Node Modules (CommonJS)

• ماژول های جاوا اسکریپت (ماژول های ES) در مقابل ماژول های گره (CommonJS) JavaScript Modules (ES Modules) Versus Node Modules (CommonJS)

• آزمایش شی روتر ما Testing Our Router Object

• آزمایش شی روتر ما Testing Our Router Object

• ایجاد مسیر GET Creating the GET Route

• ایجاد مسیر GET Creating the GET Route

• در حال نصب Nodemon Installing Nodemon

• در حال نصب Nodemon Installing Nodemon

• معرفی پستچی Postman Introduction

• معرفی پستچی Postman Introduction

• ایجاد یک مسیر POST Creating a POST Route

• ایجاد یک مسیر POST Creating a POST Route

• Express.json() در مقابل Express.urlencoded() Express.json() Versus Express.urlencoded()

• Express.json() در مقابل Express.urlencoded() Express.json() Versus Express.urlencoded()

• ایجاد یک تابع شناسه منحصر به فرد Creating a Unique ID Function

• ایجاد یک تابع شناسه منحصر به فرد Creating a Unique ID Function

• ایجاد مسیر PUT - قسمت 1 (با استفاده از روش Find) Creating a PUT Route - Part 1 (Using the find Method)

• ایجاد مسیر PUT - قسمت 1 (با استفاده از روش Find) Creating a PUT Route - Part 1 (Using the find Method)

• متد ()Array.find چیست What is the Array.find() Method

• متد ()Array.find چیست What is the Array.find() Method

• ایجاد یک مسیر PUT - قسمت 2 (با استفاده از روش splice) Creating a PUT Route - Part 2 (Using the splice Method)

• ایجاد یک مسیر PUT - قسمت 2 (با استفاده از روش splice) Creating a PUT Route - Part 2 (Using the splice Method)

• روش Array.splice() چیست What is the Array.splice() Method

• روش Array.splice() چیست What is the Array.splice() Method

• آزمایش مسیرهای ما در پستچی Testing Our Routes in Postman

• آزمایش مسیرهای ما در پستچی Testing Our Routes in Postman

• ایجاد مسیر DELETE Creating a DELETE Route

• ایجاد مسیر DELETE Creating a DELETE Route

• سرور Outro Server Outro

• سرور Outro Server Outro

پروژه نهایی دوره - وظیفه 1 - سرور و مسیرها Course Final Project – Task 1 – Server and Routes

پروژه نهایی دوره - وظیفه 2 - XMLHttpRequest (AJAX API) Course Final Project – Task 2 – XMLHttpRequest (AJAX API)

• معرفی بخش Introduction to Section

• معرفی بخش Introduction to Section

• قرار است چه چیزی را با هم بسازیم؟ What Are We Going to Build Together?

• قرار است چه چیزی را با هم بسازیم؟ What Are We Going to Build Together?

• HTML و نمای کلی فایل HTML and File Overview

• HTML و نمای کلی فایل HTML and File Overview

• XHR AJAX GET درخواست XHR AJAX GET Request

• XHR AJAX GET درخواست XHR AJAX GET Request

• رفع CORS با نوشتن یک تابع میان‌افزار سفارشی Fixing CORS by Writing a Custom Middleware Function

• رفع CORS با نوشتن یک تابع میان‌افزار سفارشی Fixing CORS by Writing a Custom Middleware Function

• رفع CORS با نصب ماژول "cors" با NPM Fixing CORS by Installing the "cors" Module with NPM

• رفع CORS با نصب ماژول "cors" با NPM Fixing CORS by Installing the "cors" Module with NPM

• افزودن متن پویا به درخواست GET Adding Dynamic Text to the GET Request

• افزودن متن پویا به درخواست GET Adding Dynamic Text to the GET Request

• ایجاد کتابخانه/ماژول AJAX Creating an AJAX Library/Module

• ایجاد کتابخانه/ماژول AJAX Creating an AJAX Library/Module

• تبدیل درخواست GET ما به یک ماژول Converting Our GET Request into a Module

• تبدیل درخواست GET ما به یک ماژول Converting Our GET Request into a Module

• مروری بر درخواست GET ما Overview of Our GET Request

• مروری بر درخواست GET ما Overview of Our GET Request

• درخواست XHR AJAX POST XHR AJAX POST Request

• درخواست XHR AJAX POST XHR AJAX POST Request

• بهبود درخواست GET ما (تبدیل تماس AJAX ما به یک تماس همزمان) Improving Our GET Request (Turning Our AJAX Call into a Synchronous One)

• بهبود درخواست GET ما (تبدیل تماس AJAX ما به یک تماس همزمان) Improving Our GET Request (Turning Our AJAX Call into a Synchronous One)

• تکمیل درخواست POST با شروع درخواست در فایل app.js Completing the POST Request by Initiating the Request in the app.js File

• تکمیل درخواست POST با شروع درخواست در فایل app.js Completing the POST Request by Initiating the Request in the app.js File

• به روز رسانی متن پاراگراف POST به صورت پویا Updating the POST Paragraph Text Dynamically

• به روز رسانی متن پاراگراف POST به صورت پویا Updating the POST Paragraph Text Dynamically

• اضافه کردن برخی از رسیدگی به خطا Adding Some Error Handling

• اضافه کردن برخی از رسیدگی به خطا Adding Some Error Handling

• تکمیل درخواست PUT XHR Completing the PUT XHR Request

• تکمیل درخواست PUT XHR Completing the PUT XHR Request

• تکمیل درخواست DELETE XHR Completing the DELETE XHR Request

• تکمیل درخواست DELETE XHR Completing the DELETE XHR Request

• XHR Outro XHR Outro

• XHR Outro XHR Outro

پروژه نهایی دوره - وظیفه 2 - XMLHttpRequest (AJAX API) Course Final Project – Task 2 – XMLHttpRequest (AJAX API)

پروژه نهایی دوره - وظیفه 2 - واکشی (AJAX API) Course Final Project – Task 2 – Fetch (AJAX API)

• معرفی بخش Introduction to Section

• معرفی بخش Introduction to Section

• دریافت درخواست واکشی - راه اندازی GET Fetch Request - Setup

• دریافت درخواست واکشی - راه اندازی GET Fetch Request - Setup

• استفاده از تابع Callback برای نوشتن درخواست واکشی GET ما Using a Callback Function to Write Our GET Fetch Request

• استفاده از تابع Callback برای نوشتن درخواست واکشی GET ما Using a Callback Function to Write Our GET Fetch Request

• ارسال درخواست واکشی POST Fetch Request

• ارسال درخواست واکشی POST Fetch Request

• درخواست واکشی را قرار دهید PUT Fetch Request

• درخواست واکشی را قرار دهید PUT Fetch Request

• درخواست واکشی را حذف کنید DELETE Fetch Request

• درخواست واکشی را حذف کنید DELETE Fetch Request

• خلاصه - درخواست‌های AJAX ما مطابق با RESTful هستند Summary - Our AJAX Requests Are RESTful Compliant

• خلاصه - درخواست‌های AJAX ما مطابق با RESTful هستند Summary - Our AJAX Requests Are RESTful Compliant

• Outro را واکشی کنید Fetch Outro

• Outro را واکشی کنید Fetch Outro

پروژه نهایی دوره - وظیفه 2 - واکشی (AJAX API) Course Final Project – Task 2 – Fetch (AJAX API)

پروژه نهایی دوره - وظیفه 2 - Axios (AJAX API) Course Final Project – Task 2 – Axios (AJAX API)

• بخش مقدمه Section Introduction

• بخش مقدمه Section Introduction

• چالش اساسی - مقدمه ای بر آنچه که قرار است با Axios بسازیم Basic Challenge - Introduction to What We Are Going to Build with Axios

• چالش اساسی - مقدمه ای بر آنچه که قرار است با Axios بسازیم Basic Challenge - Introduction to What We Are Going to Build with Axios

• نصب AXIOS Installing AXIOS

• نصب AXIOS Installing AXIOS

• واکشی داده های متنی با AXIOS Fetching Text Data with AXIOS

• واکشی داده های متنی با AXIOS Fetching Text Data with AXIOS

• واکشی داده های JSON با AXIOS Fetching JSON Data with AXIOS

• واکشی داده های JSON با AXIOS Fetching JSON Data with AXIOS

• راه اندازی فایل های پروژه دوره اصلی ما برای Axios Setting Up Our Main Course Project Files for Axios

• راه اندازی فایل های پروژه دوره اصلی ما برای Axios Setting Up Our Main Course Project Files for Axios

• دریافت درخواست با استفاده از Axios GET Request Using Axios

• دریافت درخواست با استفاده از Axios GET Request Using Axios

• بازرسی شی واکنش Axios Inspecting the Axios Response Object

• بازرسی شی واکنش Axios Inspecting the Axios Response Object

• درخواست ارسال با استفاده از Axios POST Request Using Axios

• درخواست ارسال با استفاده از Axios POST Request Using Axios

• درخواست PUT با استفاده از Axios PUT Request Using Axios

• درخواست PUT با استفاده از Axios PUT Request Using Axios

• با استفاده از Axios درخواست را حذف کنید DELETE Request Using Axios

• با استفاده از Axios درخواست را حذف کنید DELETE Request Using Axios

• Axios Outro Axios Outro

• Axios Outro Axios Outro

پروژه نهایی دوره - وظیفه 2 - Axios (AJAX API) Course Final Project – Task 2 – Axios (AJAX API)

پروژه پایانی دوره - وظیفه 3 - پایانه نهایی + AJAX API + مسیرهای سرور Course Final Project – Task 3 – Final Frontend + AJAX APIs + Server Routes

• معرفی بخش Introduction to Section

• معرفی بخش Introduction to Section

• قرار است چه چیزی بسازیم؟ What Are We Going to Build?

• قرار است چه چیزی بسازیم؟ What Are We Going to Build?

• HTML - نوار ناوبری و دکمه افزودن سگ HTML - Navbar and Add Dog Button

• HTML - نوار ناوبری و دکمه افزودن سگ HTML - Navbar and Add Dog Button

• موجودیت های HTML چیست؟ What Are HTML Entities

• موجودیت های HTML چیست؟ What Are HTML Entities

• HTML - اضافه کردن Dog Modal HTML - Add Dog Modal

• HTML - اضافه کردن Dog Modal HTML - Add Dog Modal

• HTML - به روز رسانی Dog Modal HTML - Update Dog Modal

• HTML - به روز رسانی Dog Modal HTML - Update Dog Modal

• ما به ویژگی های نام نیاز نداریم We Don't Need the Name Attributes

• ما به ویژگی های نام نیاز نداریم We Don't Need the Name Attributes

• CSS - سرفصل ها و دکمه ها CSS - Headings and Buttons

• CSS - سرفصل ها و دکمه ها CSS - Headings and Buttons

• CSS - اضافه کردن Dog Modal CSS - Add Dog Modal

• CSS - اضافه کردن Dog Modal CSS - Add Dog Modal

• CSS - به روز رسانی Dog Modal CSS - Update Dog Modal

• CSS - به روز رسانی Dog Modal CSS - Update Dog Modal

• استفاده از جاوا اسکریپت در مدال های ما Using JavaScript to Our Modals

• استفاده از جاوا اسکریپت در مدال های ما Using JavaScript to Our Modals

• CSS - جداول CSS - Tables

• CSS - جداول CSS - Tables

• درخواست AJAX GET - یک درخواست GET در رویداد DOMContentLoaded انجام دهید AJAX GET Request - Perform a GET Request on the DOMContentLoaded Event

• درخواست AJAX GET - یک درخواست GET در رویداد DOMContentLoaded انجام دهید AJAX GET Request - Perform a GET Request on the DOMContentLoaded Event

• استفاده از جاوا اسکریپت برای افزودن دکمه به روز رسانی و حذف به جدول ما Using JavaScript to Add an Update and Delete Button to Our Table

• استفاده از جاوا اسکریپت برای افزودن دکمه به روز رسانی و حذف به جدول ما Using JavaScript to Add an Update and Delete Button to Our Table

• درخواست ارسال POST Request

• درخواست ارسال POST Request

• پاک کردن داده‌های فرم زمانی که کاربر به «ارسال» ضربه می‌زند Clearing Form Data When a User Hits 'Submit'

• پاک کردن داده‌های فرم زمانی که کاربر به «ارسال» ضربه می‌زند Clearing Form Data When a User Hits 'Submit'

• یک قدم به عقب برو Take a Step Back

• یک قدم به عقب برو Take a Step Back

• با استفاده از روش reset() برای پاک کردن مقادیر فرم Using the reset() Method to Clear Form Values

• با استفاده از روش reset() برای پاک کردن مقادیر فرم Using the reset() Method to Clear Form Values

• پر کردن مدال به روز رسانی - قسمت 1 - عبور از DOM برای یافتن شناسه Populating the Update Modal - Part 1 - Traversing the DOM to Find the ID

• پر کردن مدال به روز رسانی - قسمت 1 - عبور از DOM برای یافتن شناسه Populating the Update Modal - Part 1 - Traversing the DOM to Find the ID

• یک قدم به عقب بردارید: عبور از DOM Take a Step Back: Traversing the DOM

• یک قدم به عقب بردارید: عبور از DOM Take a Step Back: Traversing the DOM

• پر کردن مدال به روز رسانی - قسمت 2 - استفاده از روش find() برای دریافت سگ ما Populating the Update Modal - Part 2 - Using the find() Method to GET Our Dog

• پر کردن مدال به روز رسانی - قسمت 2 - استفاده از روش find() برای دریافت سگ ما Populating the Update Modal - Part 2 - Using the find() Method to GET Our Dog

• پر کردن مدال به روز رسانی - قسمت 3 - پایان Populating the Update Modal - Part 3 - Finishing

• پر کردن مدال به روز رسانی - قسمت 3 - پایان Populating the Update Modal - Part 3 - Finishing

• بهبود کد ما - ویژگی های Disabled و classList Improving Our Code - Disabled and classList Properties

• بهبود کد ما - ویژگی های Disabled و classList Improving Our Code - Disabled and classList Properties

• درخواست PUT - به روز رسانی یک سگ PUT Request - Updating a Dog

• درخواست PUT - به روز رسانی یک سگ PUT Request - Updating a Dog

• درخواست حذف - حذف یک سگ DELETE Request - Removing a Dog

• درخواست حذف - حذف یک سگ DELETE Request - Removing a Dog

• خلاصه - شما راه طولانی را پیموده اید Recap – You Have Come a Long Way

• خلاصه - شما راه طولانی را پیموده اید Recap – You Have Come a Long Way

پروژه پایانی دوره - وظیفه 3 - پایانه نهایی + AJAX API + مسیرهای سرور Course Final Project – Task 3 – Final Frontend + AJAX APIs + Server Routes

نتیجه Conclusion

• Outro Outro

• Outro Outro

نتیجه Conclusion